<template>
  <view class="card">
    <view class="card-header">
      <view class="card-header-title"> {{ title }} </view>
      <view class="card-header-state"> {{ state }} </view>
    </view>
   <slot>
     <view class="card-content">
       <view> {{ content }} </view>
     </view>
   </slot>
    <view class="card-footer">
      <slot name=footer></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "标题",
    },
    state: {
      type: String,
      default: "状态",
    },
    content: {
      type: String,
      default: "card",
    },
    fr: {
      type: String,
      default: "card",
    },
    ff: {
      type: String,
      default: "card",
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  border-radius: 30upx;
  margin-bottom: 30upx;
  &-header {
    display: flex;
    justify-content: space-between;
    padding: 16upx;
    &-title {
      font-size: 40upx;
      font-weight: 550;
    }
    &-state {
      font-size: 32upx;
      width: 140upx;
      height: 50upx;
      color: #b17a2e;
      background-color: #e0c59f;
      border-radius: 25upx;
      line-height: 50upx;
      text-align: center;
    }
  }

  &-content {
    padding: 0 16upx;
    color: #9c9c9c;
  }
  &-footer {
    display: flex;
    padding: 16upx;
    justify-content: space-between;
    &-f {
      color: red;
      padding: 0 20upx;
      height: 40upx;
      border-radius: 20upx;
      line-height: 40upx;
      text-align: center;
      background-color: #fceced;
    }
    &-r {
      color: #9c9c9c;
    }
  }
}
</style>
